<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" :width="600" destroy-on-close @closed="$emit('closed')">

		<el-form :model="form" :rules="rules" ref="ruleForm" label-width="80px">
			<el-form-item label="所属角色" prop="role_id">
				<el-select v-model="form.role_id" placeholder="请选择" style="width: 100%">
					<el-option
						v-for="item in roles"
						:key="item.id"
						:label="item.name"
						:value="item.id">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="登录名" prop="account">
				<el-input v-model="form.account" placeholder="登录名(纯字母)"></el-input>
			</el-form-item>
			<el-form-item label="密码" prop="password">
				<el-input v-model="form.password"></el-input>
			</el-form-item>
			<el-form-item label="昵称" prop="nickname">
				<el-input v-model="form.nickname"></el-input>
			</el-form-item>
			<el-form-item label="状态" prop="status">
				<el-radio v-model="form.status" :label="1">正常</el-radio>
				<el-radio v-model="form.status" :label="2">禁用</el-radio>
			</el-form-item>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="optSubmit('ruleForm')" :loading="loading">确 定</el-button>
			</div>
		</template>

		<el-dialog title="" v-model="dialogVisible" width="1200px" class="image-check-dialog">
			<Attachment :need-select="true" @selected-img="selectedImg" @close-dialog="dialogVisible=false" :select-num="1"></Attachment>
		</el-dialog>
	</el-dialog>
</template>

<script>

import Attachment from "@/components/attachment";

export default {
	emits: ['success', 'closed'],
	components: {
		Attachment
	},
	data() {
		return {
			mode: "add",
			titleMap: {
				add: '新增管理员',
				edit: '编辑管理员',
				show: '查看'
			},
			form: {
				id: 0,
				account: '',
				nickname: '',
				password: '',
				role_id: '',
				status: 1
			},
			roles: [],
			rules: {
				account: [
					{required: true, message: '请输入登录名称', trigger: 'blur'}
				],
				nickname: [
					{required: true, message: '请输入昵称', trigger: 'blur'}
				],
				role_id: [
					{required: true, message: '请选择所属角色', trigger: 'blur'}
				],
				status: [
					{required: true, message: '请选择状态', trigger: 'blur'}
				]
			},
			loading: false,
			plusIcon: "el-icon-plus",
			deleteIcon: "el-icon-delete",
			dialogVisible: false,
			visible: false
		}
	},
	mounted() {

		if (this.mode == 'add') {
			this.getAllRolesAdd()

			this.rules.password = [
				{ required: true, message: '请输入密码', trigger: 'blur' }
			]
		}
	},
	watch: {
		mode(newVal) {
			if (newVal == 'add') {
				this.getAllRolesAdd()

				this.rules.password = [
					{ required: true, message: '请输入密码', trigger: 'blur' }
				]
			} else {
				this.getAllRolesEdit()

				this.rules.password = []
			}
		}
	},
	methods: {
		//显示
		open(mode = 'add') {
			this.mode = mode;
			this.visible = true;
			return this
		},
		// 表单提交方法
		optSubmit(formName) {
			this.$refs[formName].validate(async (valid) => {
				if (valid) {
					let res;
					if (this.mode == 'add') {
						res = await this.$API.admin.add.post(this.form)
					} else {
						res = await this.$API.admin.edit.post(this.form)
					}

					if (res.code == 0) {
						this.$message.success(res.msg)
						this.$emit('success')
					} else {
						this.$message.error(res.msg)
					}
				} else {
					return false;
				}
			})
		},
		// 获取所有的角色 -add
		async getAllRolesAdd() {
			let res = await this.$API.admin.getAddInfo.get()
			this.roles = res.data
		},
		async getAllRolesEdit() {
			let res = await this.$API.admin.getEditInfo.get()
			this.roles = res.data
		},
		// 表单注入数据
		setData(item) {
			this.form.id = item.id
			this.form.account = item.account.split('@')[0]
			this.form.nickname = item.nickname
			this.form.avatar = item.avatar
			this.form.role_id = item.role_id
			this.form.status = item.status
		}
	}
}
</script>

<style scoped>
p {
	padding: 0;
	margin: 0;
}

.el-table__header tr,
.el-table__header th {
	padding: 0;
	height: 20px;
	line-height: 20px;
}

.del-btn {
	cursor: pointer;
	color: #F56C6C
}

.add-btn {
	cursor: pointer;
	margin-top: 18px;
	color: #409EFF
}
.img-list {
	height: 60px;
	padding-left: 0;
	margin-top: 0;
}
.img-list li:first-child {
	margin-left: 0;
}
.img-list li {
	width: 58px;
	height: 58px;
	float: left;
	margin-left: 5px;
	cursor: pointer;
	position: relative;
}
.addImg {
	height: 56px;
	width: 56px;
	line-height: 56px;
	text-align: center;
	border: 1px dashed rgb(221, 221, 221);
}
ul li {list-style: none}
.image-check-dialog .el-dialog__header {display: none}
.image-check-dialog .el-dialog__body {padding: 0;}
.img-list .img-tools {
	position: absolute;
	width: 58px;
	height: 15px;
	line-height: 15px;
	text-align: center;
	top: 43px;
	background: rgba(0, 0, 0, 0.6);
	cursor: pointer;
}
</style>

